<template>
  <Card :bordered="false" dis-hover>
    <div class="hqsearch">
      <jgsearch
        :searchData="searchData"
        @on-enter-keyword="askDatakeyword"
        @on-clear-keyword="askDatakeyword"
        @on-change-change="askDatanow"
        @on-change-changecheck="askDatacheck"
      >
        <template v-slot:tag>
          <tags
            @sunchangetag="sunchangetags"
            :tags_ids="params.tags_id"
            :project_tags_ids="params.project_tags_ids"
          ></tags>
        </template>
        <template v-slot:radio v-if="types != 4">
          <RadioGroup type="button" v-model="type" @on-change="changetype()">
            <Radio :label="1">月</Radio>
          </RadioGroup>
        </template>
        <template v-slot:city>
          <jgcheckcity
            ref="checkcity"
            @cityvalue="cityvalue"
            v-model="area_code"
            :name="`returnVisit${types}`"
          ></jgcheckcity>
        </template>
        <template v-slot:belong>
          <searchTree
            :multiple="true"
            :options="belongData"
            placeholder="归属人"
            :limit="3"
            :normalizer="normalizer"
            @input="valueChange"
            :limitText="limitText"
            noResultsText="无数据"
            :append-to-body="true"
          />
        </template>
      </jgsearch>
    </div>
    <tableList
      ref="lists"
      :loading="loading"
      :list="list"
      :type="types"
      @sortchange="sortchange"
      @patientfun="askDatas"
      @not_callback="callbackaskData"
      @askDatas="askData"
    ></tableList>
    <div class="ivu-mt ivu-text-center">
      <Page
        show-total
        show-elevator
        show-sizer
        :total="total"
        :current.sync="params.page"
        :page-size="params.pageSize"
        :page-size-opts="pageOpts"
        @on-change="changepage"
        @on-page-size-change="changepageSize"
      ></Page>
    </div>
  </Card>
</template>
<script>
import jgsearch from "@/components/search";
// import jgcheckcity from "@/components/checkcity";
import tableList from "./modules/table-list";
import mixincity from "@/mixins/mixincity";
import searchTree from "@riophae/vue-treeselect";
import dayjs from "dayjs";
import tags from "@/components/tags";
import tagmixins from "@/mixins/tagmixins";
import {
  callbackpatientlist,
  callbackgetparamslist,
  patientindexsearchcity,
} from "@api/hqapi";
import { patientindextagsconditionlistv2 } from "@/api/hqapi/tags";
export default {
  name: "returnVisit",
  components: { jgsearch, tableList, tags, searchTree },
  mixins: [mixincity, tagmixins],
  props: ["types"],
  data() {
    return {
      loadingcity: false,
      optionscity: [],
      searchDatas:
        this.types == 4
          ? {
              project: [
                {
                  id: 1,
                  key: "DatePicker",
                  transfer: true,
                  type: "daterange",
                  clearable: true,
                  options: {},
                  style: { width: "200px" },
                  value: [new Date(), new Date()],
                  callback: "change",
                },
                {
                  id: 13,
                  key: "DatePicker",
                  transfer: true,
                  type: "daterange",
                  placeholder: "患者创建日期筛选",
                  clearable: true,
                  options: {},
                  style: { width: "200px" },
                  value: [],
                  callback: "change",
                },
                { id: 12, key: "slot", keys: "radio" },
                {
                  id: 2,
                  key: "Input",
                  placeholder: "请输入患者姓名/手机号/微信号",
                  clearable: true,
                  style: { width: "220px" },
                  value: "",
                  callback: "keyword",
                },
                {
                  id: 21,
                  key: "Select",
                  transfer: true,
                  style: { minWidth: "100px" },
                  placeholder: "电话微信",
                  value: "",
                  childList: [
                    { label: "只有电话", value: 1 },
                    { label: "只有微信", value: 2 },
                    { label: "无联系方式", value: 3 },
                    { label: "有电话有微信", value: 4 },
                  ],
                  clearable: true,
                  callback: "change",
                },
                {
                  id: 20,
                  key: "Select",
                  transfer: true,
                  style: { minWidth: "100px" },
                  placeholder: "部位",
                  multiple: true,
                  maxTagCount: 3,
                  value: [],
                  childList: [],
                  clearable: true,
                  callback: "change",
                },
                {
                  id: 4,
                  key: "Select",
                  transfer: true,
                  placeholder: "患者状态",
                  clearable: true,
                  style: { width: "100px" },
                  value: "",
                  childList: [],
                  callback: "change",
                },
                {
                  id: 11,
                  key: "Select",
                  transfer: true,
                  placeholder: "上次回访人",
                  Group: true,
                  clearable: true,
                  style: { width: "120px" },
                  value: "",
                  childList: [],
                  callback: "change",
                },
                {
                  id: 9,
                  key: "Select",
                  transfer: true,
                  placeholder: "上次回访状态",
                  multiple: true,
                  clearable: true,
                  maxTagCount: 3,
                  style: { minWidth: "150px" },
                  value: [],
                  childList: [],
                  callback: "change",
                },
                {
                  id: 5,
                  key: "TreeSelect",
                  transfer: true,
                  placeholder: "病种",
                  clearable: true,
                  style: { width: "100px" },
                  value: "",
                  childList: [],
                  callback: "change",
                },
                {
                  id: 6,
                  key: "TreeSelect",
                  transfer: true,
                  placeholder: "渠道来源",
                  clearable: true,
                  style: { width: "100px" },
                  value: "",
                  childList: [],
                  callback: "change",
                },
                { id: 10, key: "slot", keys: "city", transfer: true },
                { id: 3, key: "slot", keys: "belong", transfer: true },
                // { id: 3, key: 'Select', placeholder: '归属人',multiple: true, Group: true, clearable: true, style: { width: '200px' }, value: '', childList: [], callback: 'change' },
                // { id: 30, key: 'slot', keys: 'tag' },
                {
                  id: 30,
                  key: "TreeSelect",
                  placeholder: "请选择个人标签",
                  transfer: true,
                  clearable: true,
                  style: { width: "200px" },
                  value: "",
                  childList: [],
                  callback: "change",
                },
                {
                  id: 31,
                  key: "Select",
                  placeholder: "请选择部门标签",
                  transfer: true,
                  clearable: true,
                  style: { width: "200px" },
                  value: "",
                  childList: [],
                  callback: "change",
                },
                {
                  id: 8,
                  key: "Checkbox",
                  value: [],
                  transfer: true,
                  childList: [{ label: "重复", value: 3 }],
                  callback: "changecheck",
                },
              ],
            }
          : {
              project: [
                {
                  id: 1,
                  key: "DatePicker",
                  transfer: true,
                  type: "daterange",
                  clearable: true,
                  options: {},
                  style: { width: "200px" },
                  value: [new Date(), new Date()],
                  callback: "change",
                },
                { id: 12, key: "slot", keys: "radio" },
                {
                  id: 2,
                  key: "Input",
                  placeholder: "请输入患者姓名/手机号/微信号",
                  clearable: true,
                  style: { width: "220px" },
                  value: "",
                  callback: "keyword",
                },
                {
                  id: 21,
                  key: "Select",
                  transfer: true,
                  style: { minWidth: "100px" },
                  placeholder: "电话微信",
                  value: "",
                  childList: [
                    { label: "只有电话", value: 1 },
                    { label: "只有微信", value: 2 },
                    { label: "无联系方式", value: 3 },
                    { label: "有电话有微信", value: 4 },
                  ],
                  clearable: true,
                  callback: "change",
                },
                {
                  id: 20,
                  key: "Select",
                  transfer: true,
                  style: { minWidth: "100px" },
                  placeholder: "部位",
                  multiple: true,
                  maxTagCount: 3,
                  value: [],
                  childList: [],
                  clearable: true,
                  callback: "change",
                },
                {
                  id: 4,
                  key: "Select",
                  transfer: true,
                  placeholder: "患者状态",
                  clearable: true,
                  style: { width: "100px" },
                  value: "",
                  childList: [],
                  callback: "change",
                },
                {
                  id: 11,
                  key: "Select",
                  transfer: true,
                  placeholder: "上次回访人",
                  Group: true,
                  clearable: true,
                  style: { width: "120px" },
                  value: "",
                  childList: [],
                  callback: "change",
                },
                {
                  id: 9,
                  key: "Select",
                  transfer: true,
                  placeholder: "上次回访状态",
                  multiple: true,
                  clearable: true,
                  maxTagCount: 3,
                  style: { minWidth: "150px" },
                  value: [],
                  childList: [],
                  callback: "change",
                },
                {
                  id: 5,
                  key: "TreeSelect",
                  transfer: true,
                  placeholder: "病种",
                  clearable: true,
                  style: { width: "100px" },
                  value: "",
                  childList: [],
                  callback: "change",
                },
                {
                  id: 6,
                  key: "TreeSelect",
                  transfer: true,
                  placeholder: "渠道来源",
                  clearable: true,
                  style: { width: "100px" },
                  value: "",
                  childList: [],
                  callback: "change",
                },
                { id: 10, key: "slot", keys: "city", transfer: true },
                { id: 3, key: "slot", keys: "belong", transfer: true },
                // { id: 3, key: 'Select', placeholder: '归属人',multiple: true, Group: true, clearable: true, style: { width: '200px' }, value: '', childList: [], callback: 'change' },
                // { id: 30, key: 'slot', keys: 'tag' },
                {
                  id: 30,
                  key: "TreeSelect",
                  placeholder: "请选择个人标签",
                  transfer: true,
                  clearable: true,
                  style: { width: "200px" },
                  value: "",
                  childList: [],
                  callback: "change",
                },
                {
                  id: 31,
                  key: "Select",
                  placeholder: "请选择部门标签",
                  transfer: true,
                  clearable: true,
                  style: { width: "200px" },
                  value: "",
                  childList: [],
                  callback: "change",
                },
                {
                  id: 8,
                  key: "Checkbox",
                  value: [],
                  transfer: true,
                  childList: [{ label: "重复", value: 3 }],
                  callback: "changecheck",
                },
              ],
            },
      timer: "",
      type: undefined,
      searchData: {},
      params:
        this.types == 4
          ? {
              area_code: "",
              page: 1,
              pageSize: 10,
              last_callback_id: "",
              type: undefined,
              start_time: new Date(),
              end_time: new Date(),
              keywords: "",
              belong_member_id: [],
              patient_status_id: "",
              diseases_id: "",
              source_channel_id: "",
              tags_id: "",
              project_tags_ids: "",
              have_mobile: 0,
              have_wechat: 0,
              have_repeat: 0,
              callback_state_id: "",
              last_callback_time_type: 0,
              next_callback_time_type: 0,
              have_contact_type: "",
              sort_callback_count_type: 0,
              created_stime: "",
              created_etime: "",
            }
          : {
              area_code: "",
              page: 1,
              pageSize: 10,
              last_callback_id: "",
              type: undefined,
              start_time: new Date(),
              end_time: new Date(),
              keywords: "",
              belong_member_id: [],
              patient_status_id: "",
              diseases_id: "",
              source_channel_id: "",
              tags_id: "",
              project_tags_ids: "",
              have_mobile: 0,
              have_wechat: 0,
              have_repeat: 0,
              callback_state_id: "",
              last_callback_time_type: 0,
              next_callback_time_type: 0,
              have_contact_type: "",
              sort_callback_count_type: 0,
            },
      options0: {
        disabledDate(date) {
          return date && date.valueOf() < dayjs().add(-1, "day");
        },
      },
      options1: {
        disabledDate(date) {
          return date && date.valueOf() > dayjs();
        },
      },
      options4: {
        disabledDate(date) {
          return date && date.valueOf() > dayjs().add(-1, "day");
        },
      },
      pageOpts: [10, 15, 20, 30, 50],
      total: 0,
      list: [],
      area_code: [],
      numbool: true,
      loading: false,
      bool: true,
      belongData: [],
      belongValue: [],
      normalizer(node) {
        return {
          id: node.value,
          label: node.label,
          children: node.children,
        };
      },
      limitText: function(count) {
        return `+ ${count}`;
      },
    };
  },
  mounted() {},
  methods: {
    initials() {
      this.searchData = JSON.parse(JSON.stringify(this.searchDatas));
      this.searchData.project.forEach((item) => {
        if (item.id == 1) {
          // debugger
          item.value = [new Date(), new Date()];
        } else if (item.id == 13) {
          // debugger
          item.value = [];
        } else if (item.id == 2) {
          this.params.keywords = item.value;
        } else if (item.id == 3) {
          item.value = [];
        } else if (item.id == 4) {
          item.value = "";
        } else if (item.id == 5) {
          item.value = "";
        } else if (item.id == 6) {
          item.value = "";
        } else if (item.id == 7) {
          item.value = [];
          item.childList = [];
        } else if (item.id == 8) {
          item.value = [];
        } else if (item.id == 9) {
          item.value = "";
        } else if (item.id == 11) {
          item.value = "";
        } else if (item.id == 20) {
          item.value = [];
        } else if (item.id == 30) {
          item.value = "";
        } else if (item.id == 31) {
          item.value = "";
        }
      });
      this.params.belong_member_id = (this.$route.query.member_id || "") + "";
      this.searchData.project[3].value =
        (this.$route.query.member_id || "") + "";
      this.params.type = this.types;
      if (this.params.type == 0) {
        this.searchData.project[0].options = this.options0;
        this.params.start_time = dayjs();
        this.params.end_time = dayjs();
      } else if (this.params.type == 1) {
        this.searchData.project[0].options = this.options1;
        this.params.start_time = dayjs();
        this.params.end_time = dayjs();
      } else if (this.params.type == 4) {
        this.searchData.project[0].value = [
          dayjs(this.$Date().add(-1, "day")).format("YYYY-MM-DD"),
          dayjs(this.$Date().add(-1, "day")).format("YYYY-MM-DD"),
        ];
        this.searchData.project[0].options = this.options4;
        this.params.start_time = dayjs(this.$Date().add(-1, "day"));
        this.params.end_time = dayjs(this.$Date().add(-1, "day"));
        this.searchData.project[1].options = this.options4;
        this.params.created_stime = "";
        this.params.created_etime = "";
      } else if (this.params.type == 5) {
        this.searchData.project.splice(0, 2);
        this.params.start_time = "";
        this.params.end_time = "";
      }
      this.initial();
    },
    cityvalue(city) {
      this.area_code = city;
      this.params.area_code = city.join(",");
      this.params.page = 1;
      this.askData();
    },
    initial() {
      patientindextagsconditionlistv2().then((res) => {
        this.searchData.project.forEach((item) => {
          if (item.id == 30) {
            item.value = "";
            item.childList = res.self_tags;
          } else if (item.id == 31) {
            item.value = "";
            item.childList = res.project_tags;
          }
        });
      });
      callbackgetparamslist().then((res) => {
        this.searchData.project.forEach((item) => {
          if (item.id == 4) {
            item.childList = res.patient_status;
          } else if (item.id == 3) {
            item.childList = res.member_list;
            this.belongData = JSON.parse(JSON.stringify(res.member_list));
          } else if (item.id == 5) {
            item.childList = res.diseases_list;
          } else if (item.id == 6) {
            item.childList = res.source_channel_list;
          } else if (item.id == 9) {
            item.childList = res.callback_status;
          } else if (item.id == 11) {
            item.childList = res.member_list;
          } else if (item.id == 20) {
            item.value = [];
            item.childList = res.body_parts_list;
          }
        });
        this.askDatas();
      });
    },
    askData() {
      this.loading = true;

      callbackpatientlist(this.params)
        .then((res) => {
          this.totallist = res.total_num;
          this.total = res.list.total;
          this.$emit("alltotallist", {
            type: +this.params.type,
            total: this.total,
          });
          if (this.params.type == 0 && this.bool) {
            this.$emit("alltotallist", {
              type: 1,
              total: res.total_num.have_callback,
            });
            this.$emit("alltotallist", {
              type: 4,
              total: res.total_num.overdue_callback,
            });
            this.$emit("alltotallist", {
              type: 5,
              total: res.total_num.in_sea,
            });
            this.bool = false;
          }
          // console.log(this.params.type,'this.params.type')
          // if(this.params.type == 0){
          //      this.list = res.list.list;
          // }
          this.list = res.list.list;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    askDatas() {
      this.$refs.lists.askData();
      this.askData();
    },
    askDatakeyword() {
      this.params.area_code = "";
      this.params.page = 1;
      this.params.belong_member_id = [];
      this.params.patient_status_id = "";
      this.params.diseases_id = "";
      this.params.source_channel_id = "";
      this.params.tags_id = "";
      this.params.project_tags_ids = "";
      this.params.have_mobile = 0;
      this.params.have_wechat = 0;
      this.params.have_repeat = 0;
      this.params.have_contact_type = "";
      this.params.tags_id = "";
      this.params.project_tags_ids = "";
      this.type = undefined;
      this.searchData.project.forEach((item) => {
        if (item.id == 1) {
          item.value = [];
          this.params.start_time = "";
          this.params.end_time = "";
        } else if (item.id == 13) {
          item.value = [];
          this.params.created_stime = "";
          this.params.created_etime = "";
        } else if (item.id == 2) {
          this.params.keywords = item.value;
        } else if (item.id == 3) {
          item.value = "";
        } else if (item.id == 4) {
          item.value = "";
        } else if (item.id == 5) {
          item.value = "";
        } else if (item.id == 6) {
          item.value = "";
        } else if (item.id == 7) {
          item.value = [];
          item.childList = [];
        } else if (item.id == 8) {
          item.value = [];
        } else if (item.id == 9) {
          item.value = "";
        } else if (item.id == 11) {
          item.value = "";
        } else if (item.id == 20) {
          item.value = [];
        } else if (item.id == 30) {
          item.value = "";
        } else if (item.id == 31) {
          item.value = "";
        }
      });
      this.askData();
    },
    askDatanow() {
      this.params.page = 1;
      this.searchData.project.forEach((item) => {
        if (item.id == 1) {
          let sday = dayjs(`${dayjs().format("YYYY-MM")}-1`).format(
            "YYYY-MM-DD"
          );
          let eday = dayjs(`${dayjs().year()}-${dayjs().month() + 2}`)
            .subtract(1, "day")
            .format("YYYY-MM-DD");
          this.params.start_time = item.value[0];
          this.params.end_time = item.value[1];
          if (
            dayjs(item.value[0]).format("YYYY-MM-DD") != sday ||
            dayjs(item.value[1]).format("YYYY-MM-DD") != eday
          ) {
            this.type = undefined;
          }
        }
        if (item.id == 13) {
          let sday1 = dayjs(`${dayjs().format("YYYY-MM")}-1`).format(
            "YYYY-MM-DD"
          );
          let eday1 = dayjs(`${dayjs().year()}-${dayjs().month() + 2}`)
            .subtract(1, "day")
            .format("YYYY-MM-DD");
          this.params.created_stime = item.value[0];
          this.params.created_etime = item.value[1];
          if (
            dayjs(item.value[0]).format("YYYY-MM-DD") != sday1 ||
            dayjs(item.value[1]).format("YYYY-MM-DD") != eday1
          ) {
            this.type = undefined;
          }
        }
        if (item.id == 3) {
          // this.params.belong_member_id = item.value ? item.value.join(',') : '';
          this.params.belong_member_id = this.belongValue
            ? this.belongValue.join(",")
            : "";
        } else if (item.id == 4) {
          this.params.patient_status_id = item.value;
        } else if (item.id == 5) {
          this.params.diseases_id = item.value;
        } else if (item.id == 6) {
          this.params.source_channel_id = item.value;
        } else if (item.id == 9) {
          this.params.callback_state_id = item.value
            ? item.value.join(",")
            : item.value;
        } else if (item.id == 11) {
          this.params.last_callback_id = item.value;
        } else if (item.id == 20) {
          this.params.body_parts_id = item.value.join(",");
        } else if (item.id == 21) {
          this.params.have_contact_type = item.value;
        } else if (item.id == 30) {
          this.params.tags_id = item.value;
        } else if (item.id == 31) {
          this.params.project_tags_ids = item.value;
        }
      });
      this.askData();
    },
    sortchange(e) {
      this.params.page = 1;
      this.params.last_callback_time_type = 0;
      this.params.next_callback_time_type = 0;
      this.params.sort_callback_count_type = 0;
      let num = 0;
      if (e.order == "normal") num = 0;
      else if (e.order == "asc") num = 1;
      else if (e.order == "desc") num = 2;
      if (e.key == "diff_day") this.params.last_callback_time_type = num;
      else if (e.key == "next_callback_time_str") {
        this.params.next_callback_time_type = num;
      } else if (e.key == "callback_count") {
        this.params.sort_callback_count_type = num;
      }
      this.askData();
    },
    callbackaskData(e) {
      this.params.page = 1;
      this.params.not_callback_end = e.not_callback_end;
      this.params.not_callback_start = e.not_callback_start;
      this.askData();
    },
    changetype() {
      let sday = dayjs(`${dayjs().format("YYYY-MM")}-1`).format("YYYY-MM-DD");
      let eday = dayjs(`${dayjs().year()}-${dayjs().month() + 2}`)
        .subtract(1, "day")
        .format("YYYY-MM-DD");
      this.searchData.project.forEach((item) => {
        if (item.id == 1) {
          item.value = [sday, eday];
          this.params.start_time = item.value[0];
          this.params.end_time = item.value[1];
        }
      });
      this.askDatanow();
    },
    askDatacheck() {
      this.params.have_mobile = 0;
      this.params.have_wechat = 0;
      this.params.have_repeat = 0;
      this.searchData.project.forEach((item) => {
        if (item.id == 1) {
          // item.value = ['', ''];
          // this.params.start_time = '';
          // this.params.end_time = '';
        } else if (item.id == 8) {
          item.value.forEach((its) => {
            if (its == 1) {
              this.params.have_mobile = 1;
            } else if (its == 2) {
              this.params.have_wechat = 1;
            } else if (its == 3) {
              this.params.have_repeat = 1;
            }
          });
        }
      });
      this.askDatanow();
    },
    /* @函数功能: 分页 */
    changepage(e) {
      this.params.page = e;
      this.askData();
    },
    /* @函数功能: 每页数量 */
    changepageSize(e) {
      this.params.pageSize = e;
      this.askData();
    },
    defaultcityname() {
      this.optionscity = JSON.parse(JSON.stringify(this.defaultcity));
    },
    remoteMethod(query) {
      clearTimeout(this.timer);
      if (query !== "") {
        let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
        if (parseFloat(query).toString() !== "NaN") {
          return;
        }
        if (!reg.test(query)) {
          return;
        }
        this.loadingcity = true;
        return new Promise((resolve) => {
          this.timer = setTimeout(() => {
            patientindexsearchcity({
              keywords: query,
            }).then((res) => {
              if (res.list && res.list.length > 0) {
                let list = [];
                for (let item of res.list) {
                  list.push({
                    value: item.value,
                    label: item.label,
                  });
                }
                this.optionscity = list;
              }
              resolve(res.data);
            });
            this.loadingcity = false;
          }, 200);
        });
      }
    },

    valueChange(e) {
      this.belongValue = [];
      e.forEach((item) => {
        let flag = true;
        this.belongData.forEach((ele) => {
          if (ele.value == item) {
            flag = false;
            ele.children.forEach((id) => {
              this.belongValue.push(id.value);
            });
          }
        });
        if (flag) {
          this.belongValue.push(item);
        }
      });
      this.askDatanow();
    },
  },
};
</script>
<style>
.vue-treeselect {
  display: inline-block;
  vertical-align: middle;
}
.vue-treeselect__control {
  height: 32px;
}
.vue-treeselect__control {
  min-width: 150px;
  width: auto;
}
</style>
